<template>
	<view class="containerr">
		<view class="select">
			<picker @change="bindPickerChange" :value="index" :range="array" range-key='text'>
				<view class="uni-input">
					<image :src="array[index].icon" mode=""></image> {{array[index].text}}
				</view>
			</picker>
		</view>
		<input v-model="mobile" @blur="getPhone" />
	</view>
</template>

<script>
	export default {
		name: "addPhone",
		data() {
			return {
				mobile: '',
				array: [{
					icon: require("@/static/account/gh.svg"),
					id: 1,
					text: '+233'
				}, {
					icon: require("@/static/account/ng.svg"),
					id: 1,
					text: '+234'
				}],
				index: 0
			};
		},
		props: ['phone'],
		mounted() {
			this.mobile = this.phone
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
				// this.getPhone()
			},
			getPhone() {
				const phone = this.array[this.index].text + this.mobile
				this.$emit("getPhone", phone)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containerr {
		background-color: #f5f5f5;
		display: flex;
		padding: 20rpx;

		.uni-input {
			display: flex;
			align-items: center;
			position: relative;
			padding-right: 40rpx;

			&::before {
				content: "";
				position: absolute;
				right: 10rpx;
				top: 40%;
				transform: translateY(-50%);
				border-bottom: 12rpx solid #333;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>